<template>
  <div class="">
    <div
      class="bg-[#fff] fixed left-0 right-0 top-0 z-[2]"
      style="box-shadow: 0px 2px 6px rgb(0 0 0 / 10%)"
    >
      <!-- <div class="bg-[--main-color] text-[#fff]">
        <div class="m-auto w h-[40px] items-center flex text-[14px]">
          <div class="flex-1 text-center">Ahorre hasta un 60% en su primer pedido</div>
        </div>
      </div> -->
      <div class="">
        <!-- 搜索区域 -->
        <div class="w m-auto py-[13px] flex items-center">
          <a href="/#/">
            <div class="flex items-center">
              <img class="h-[54px]" src="/images/logo.png" />
            </div>
          </a>

          <div class="flex-1 px-[64px]">
            <div
              class="h-[44px] bg-[#F3F3F3] rounded-[8px] flex items-center overflow-hidden"
            >
              <div class="relative flex-1 w-0">
                <input
                  v-model="keyword"
                  class="w-full h-[44px] border-0 outline-none px-[15px] bg-[#F3F3F3] pr-[64px]"
                  type="text"
                  :placeholder="$t('baseLayout.输入关键字')"
                  @keypress="onKeyupSearch"
                />

                <div
                  class="absolute right-[20px] top-[7px] cursor-pointer text-[#767676]"
                  @click="uploadImageRef.show()"
                >
                  <n-icon :size="32">
                    <CameraOutline />
                  </n-icon>
                </div>
              </div>
              <n-button
                type="primary"
                class="h-[54px] w-[64px]"
                style="border-top-left-radius: 0; border-bottom-left-radius: 0"
                @click="onClickSearch"
              >
                <template #icon>
                  <n-icon :size="32">
                    <SearchOutline />
                  </n-icon>
                </template>
              </n-button>
            </div>
          </div>
          <div class="text-[#303030] flex items-center">
            <div class="flex items-center pr-[32px] gap-2 text-[16px]">
              <template v-if="user.id">
                <n-popover
                  trigger="hover"
                  class="user-menu"
                  style="border-radius: 20px; padding: 0; margin-top: 36px"
                >
                  <template #trigger>
                    <div class="flex items-center w-full gap-2 cursor-pointer">
                      <img
                        class="h-[40px] rounded-full"
                        :src="facebookInfo?.avatar || '/images/default_user.jpg'"
                      />
                      <div>{{ $t("baseLayout.hello") }},{{ user.name }}</div>

                      <n-icon>
                        <ChevronDownOutline></ChevronDownOutline>
                      </n-icon>
                    </div>
                  </template>

                  <div class="menu">
                    <div>
                      <div @click="goPath('/uc/address')">
                        <n-icon>
                          <Location></Location>
                        </n-icon>
                        {{ $t("button.收货地址") }}
                      </div>
                      <div @click="goPath('/uc/orderList')">
                        <n-icon>
                          <Report></Report>
                        </n-icon>
                        {{ $t("button.我的订单") }}
                      </div>
                      <!-- <div>
                        <n-icon>
                          <MailOutline></MailOutline>
                        </n-icon>
                        Message Center
                      </div> -->
                      <div @click="goPath('/artical/content/')">
                        <n-icon>
                          <Help></Help>
                        </n-icon>
                        {{ $t("button.帮助中心") }}
                      </div>
                      <div
                        @click="onClickLogout"
                        class="text-center cursor-pointer text-[#507AFC] justify-center border-0 border-t-[1px] border-solid border-[#e1e1e1]"
                      >
                        {{ $t("button.退出登录") }}
                      </div>
                    </div>
                  </div>

                  <!-- <template #footer>
                    <div
                      @click="onClickLogout"
                      class="text-center cursor-pointer text-[#507AFC]"
                    >
                      Sign Out
                    </div>
                  </template> -->
                </n-popover>
              </template>
              <template v-else>
                <n-popover
                  trigger="hover"
                  class="user-menu"
                  style="border-radius: 20px; padding: 0"
                >
                  <template #trigger>
                    <div
                      class="flex items-center font-[300]"
                      @click="facebookDialogRef.show()"
                    >
                      <n-icon :size="22">
                        <UserAvatar></UserAvatar>
                      </n-icon>
                      <div class="cursor-pointer ml-[4px]">
                        {{ $t("baseLayout.注册") }}
                      </div>
                      /
                      <div class="cursor-pointer">
                        {{ $t("baseLayout.登录") }}
                      </div>
                    </div>
                  </template>
                  <div class="menu">
                    <div>
                      <div
                        @click="facebookDialogRef.show()"
                        class="text-center cursor-pointer text-[#507AFC] hover:!bg-[#fff]"
                      >
                        <n-icon :size="24">
                          <LogoFacebook></LogoFacebook>
                        </n-icon>
                        {{ $t("button.facebook登录") }}
                      </div>
                    </div>
                  </div>
                </n-popover>
              </template>
            </div>
            <n-tooltip :show-arrow="false" trigger="hover" :raw="true" placement="bottom">
              <template #trigger>
                <div
                  class="flex items-center gap-1 text-[--main-color] rounded-[4px] p-[4px]"
                  style="border: 1px solid var(--main-color)"
                >
                  <money
                    :money="1"
                    :symbolStyle="{ color: 'var(--main-color)' }"
                    :moneyStyle="{ fontSize: '14px', color: 'var(--main-color)' }"
                  />
                  <span class="">=</span>
                  <money
                    :money="1"
                    :symbolStyle="{ color: 'var(--main-color)' }"
                    :moneyStyle="{ fontSize: '14px', color: 'var(--main-color)' }"
                    :is-cny="false"
                  ></money>
                </div>
              </template>
              <div class="text-[#606266] p-[12px] text-center bg-white rounded-[8px]">
                <div>{{ $t("tips.汇率") }}</div>
                <div>{{ $t("tips.每六小时更新") }}</div>
              </div>
            </n-tooltip>

            <!-- Registrarse / Iniciar sesión -->
          </div>
        </div>
      </div>
    </div>
    <div class="mt-[80px] min-h-[400px]">
      <router-view />
    </div>
    <div>
      <footerCom></footerCom>
      <rightFloat></rightFloat>
      <n-back-top :right="17" />
      <loginDialog ref="loginDialogRef"></loginDialog>
      <facebookDialog ref="facebookDialogRef"></facebookDialog>
      <uploadImage ref="uploadImageRef"></uploadImage>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  SearchOutline,
  CameraOutline,
  LocationOutline,
  HelpCircleOutline,
  MailOutline,
  LogoFacebook,
  ChevronDownOutline,
} from "@vicons/ionicons5";
import { Report, UserAvatar, Location, Help } from "@vicons/carbon";
import { useUser } from "@/stores/user";
import footerCom from "@/components/footer";
import rightFloat from "@/components/rightFloat";
import bus from "@/utils/mitt";
import money from "@/components/money.vue";
import { useMessage } from "naive-ui";
import loginDialog from "@/components/loginDialog.vue";
import facebookDialog from "@/components/facebookDialog.vue";
import uploadImage from "@/components/uploadImage.vue";
import { getToken } from "@/utils/request";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const message = useMessage();
const router = useRouter();
const route = useRoute();
const keyword = ref(route.params.keyword);
const { user, facebookInfo } = toRefs(useUser());
const { getUserInfo, logout } = useUser();
const loginDialogRef = ref();
const facebookDialogRef = ref();
const uploadImageRef = ref();

watch(
  () => route.path,
  (v) => {
    // console.log("%c Line:244 🍌 v", "color:#e41a6a", v, route);
    if (route.name == "search") {
      keyword.value = route.params.keyword;
    }
  }
);
const onClickSearch = () => {
  if (!keyword.value.trim()) {
    message.warning(t("baseLayout.输入关键字"));
    return;
  }
  bus.emit("searchByKeyword", keyword.value.trim());
  router.push(`/search/${keyword.value.trim()}`);
};

onMounted(async () => {
  bus.on("showLoginDialog", () => {
    // onClickLogin();
    facebookDialogRef.value.show();
  });
  bus.on("showRegisterDialog", () => {
    // onClickRegister();
    facebookDialogRef.value.show();
  });
  if (getToken()) {
    await getUserInfo();
    window.__1688_LOGGER_CONFIG = {
      appKey: "3836470", // 应用对应的appKey
      pageKey: route.name, // 页面唯一标识符
      userId: user.value.id, // 用户ID
    };
  }

  if (route.fullPath.includes("needLogin")) {
    // onClickLogin();
    facebookDialogRef.value.show();
  }
  window.testLogin = onClickRegister;
});

onUnmounted(() => {
  bus.off("showLoginDialog");
  bus.off("showRegisterDialog");
  window.testLogin = function () {};
});

const onClickRegister = () => {
  loginDialogRef.value.showRegisterDialog(true);
};

const onClickLogin = () => {
  loginDialogRef.value.showLoginDialog(true);
};

const onClickLogout = async () => {
  try {
    FB.logout(function (response) {
      console.log("facebook已退出");
    });
  } catch (error) {}

  await logout();
};

const goPath = (path) => {
  router.push(path);
};

const onKeyupSearch = (e) => {
  if (e.keyCode == 13) {
    onClickSearch();
  }
};
</script>

<style lang="scss" scoped>
.menu {
  > div {
    overflow: hidden;
    border-radius: 20px;
    // padding-top: 10px;
    > div {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 300;
      cursor: pointer;
      padding: 0 16px;
      display: flex;
      align-items: center;
      i {
        font-size: 16px;
        margin-right: 8px;
      }
      &:hover {
        background-color: #eeeeee;
      }
    }
  }
}
</style>

<style lang="scss">
.user-menu {
  .n-popover__content {
    padding: 0 !important;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
</style>
